<!-- 地址选择 -->
<template>
    <picker :value="modelValue" mode="region" @change="change">
        <view v-if="modelValue.value" class="areaBox">
            {{ modelValue.value.join('/')}}
        </view>
        <view v-else class="placeholder">
            <text>请选择省市区</text>
            <u-icon name="arrow-right" />
        </view>
    </picker>
</template>

<script>
    export default {
        props: {
            modelValue: Object
        },
        methods: {
            change(e) {
                console.log(e)
                this.$emit('update:modelValue', e.detail)
            }
        }
    }
</script>

<style scoped lang="scss">
	.areaBox {
		font-size: 30rpx;
		color: $uni-text-color-grey-3;
	}
    .placeholder {
        font-family: OPPOSans, OPPOSans;
        font-size: 36rpx;
        color: $uni-text-color-placeholder;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
</style>